<template>
  <div class="course-container">
    <filters :filter-form="filterForm" @getForm="getForm" />
    <div class="mytable">
      <mytable
        :table-cols="tableCols"
        :table-data="tableData"
        :show-index="true"
        @getOptions="getOptions"
      >
        <template #column="{data}">
          <span>{{ data.column.channelName }}</span>
        </template>
        <template #category="{data}">
          <span>{{ data.category.categoryName }}</span>
        </template>
        <template #startTime="{data}">
          <span>{{ new Date(data.startTime) | parseTime('{y}-{m}-{d}') }}</span>
        </template>
        <template #endTime="{data}">
          <span>{{ new Date(data.endTime) | parseTime('{y}-{m}-{d}') }}</span>
        </template>
      </mytable>
    </div>
    <div class="page">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="pageChage"
      />
    </div>
  </div>
</template>

<script>
import filters from '@/components/filter/index'
import mytable from '@/components/mytable/index'
import dayjs from 'dayjs'
import { parseTime } from '@/utils'

export default {
  components: {
    filters,
    mytable
  },
  filters: {
    parseTime
  },
  data() {
    return {
      parseTime,
      filterForm: [
        {
          type: 'text',
          title: '课程名称',
          placeholder: '请输入内容',
          key: 'name'
        },
        {
          type: 'text',
          title: '教师名字',
          key: 'teacherName'
        },
        {
          type: 'daterange',
          title: '选课时间',
          key: 'time'
        }
      ],
      tableCols: [
        {
          label: '课程名称',
          prop: 'name'
        },
        {
          label: '所属栏目',
          prop: 'column',
          expand: true
        },
        {
          label: '课程类别',
          prop: 'category',
          expand: true
        },
        {
          label: '教师名字',
          prop: 'teacherName'
        },
        {
          label: '所处学校',
          prop: 'schoolName'
        },
        {
          label: '评价数量',
          prop: 'evaluateCount'
        },
        {
          label: '平均评分',
          prop: 'avgMark'
        },
        {
          label: '开课时间',
          prop: 'startTime',
          expand: true
        },
        {
          label: '结课时间',
          prop: 'endTime',
          expand: true
        },
        {
          label: '操作',
          slot: true,
          options: [
            {
              label: '查看详情',
              key: 'detail'
            }
          ]
        }
      ],
      tableData: [],
      total: 0,
      form: {}
    }
  },
  created() {
    this.getCourseList()
  },
  methods: {
    // 获取课程列表
    async getCourseList(params) {
      const res = await this.$api.getCourseList(params)
      if (res && res.code === 200) {
        this.tableData = res.data.records
        this.total = res.data.totalCount
      }
    },
    getForm(form) {
      if (form.time && Array.isArray(form.time)) {
        form.startTime = dayjs(form.time[0]).format('YYYY-MM-DD')
        form.endTime = dayjs(form.time[1]).add(1, 'day').format('YYYY-MM-DD')
      } else {
        delete this.form.startTime
        delete this.form.endTime
      }
      this.form = form
      this.getCourseList(form)
    },
    pageChage(page) {
      const postData = {
        pageNo: page,
        ...this.form
      }
      this.getCourseList(postData)
    },
    getOptions(params, key) {
      console.log(params)
      if (key === 'detail') {
        this.gotoCourseDetail(params)
      }
    },
    gotoCourseDetail(row) {
      console.log(row)
      this.$router.push({
        path: '/course/detail',
        query: {
          courseId: row.courseId
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.mytable{
  margin: 0 40px;
}
.page{
  padding: 20px 0;
  text-align: center;
}
</style>
